<template>
	<cl-loading-mask :loading="firstLoading" text="拼命加载中">
		<view class="menu">
			<!-- 头部商家信息框 -->
			<view class="header-store-info">
				<!-- 标题栏 -->
				<cl-topbar background-color='rgba(0,0,0,0)' color='#fff' :border='false'/>
				<!-- 图片 -->
				<view class="header-store-image">
					<image :src="restaurantInfo.image" mode="scaleToFill">
					</image>
				</view>
				<view class="header-store">
					<span class='store'>{{ restaurantInfo.name }} <cl-icon name="cl-icon-arrow-right"></cl-icon></span>
					<span class='time'>起送价：{{restaurantInfo.minPrice}}元</span>
					<span class='tips'>商家电话：{{ restaurantInfo.phone }}</span>
					<span class='discount'>{{ restaurantInfo.notice }}</span>
				</view>
			</view>
			<!-- 中间滚动栏 -->
			<view class="scroll-menu-list" id="scroll_box">
				<!-- 左边 -->
				<view class="left-type">
					<scroll-view :style="{ height: scrollHeight + 'px' }" scroll-y='true' class="left-type-scroll"
						:scroll-into-view="leftIntoView">

						<view class="left-menu-type-item" v-for="(item,index) in leftArray"
							:class="{select:index == leftIndex}" :data-index="index" :key='index'
							@click="onLeftIndexChange(index)" :id="'left-'+index">
							<span>{{item}}</span>
							<view class="badge">
								<cl-badge type="success" is-dot>
									<view class='badge-box'></view>
								</cl-badge>
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 右边 -->
				<view class="right-menu">
					<scroll-view :style="{ height: scrollHeight + 'px' }" @scroll="mainScroll"
						:scroll-into-view="scrollInto" scroll-y='true' class="right-menu-scroll"
						scroll-with-animation="true">
						<slot></slot>
						<view class="right-menu-items" v-for="(items,index) in rightArray" :key='index'
							:id="'item-'+index">
							<!-- 标题 -->
							<view class='menu-items-title'>
								<span>
									{{items.title}}
								</span>
							</view>
							<!-- 当前分类的菜品内容 -->
							<view class="menu-items-item" v-for="(item,i) in items.list" :key="i">
								<view class="menu-item-image">
									<image :src="item.image" mode="">
									</image>
								</view>
								<view class="menu-item-content">
									<view class="item-content">
										<span class='title'>{{ item.name }}</span>
										<span class='content'>{{ item.description }}</span>
										<span class='number'>￥{{ item.price }}/份</span>
									</view>
								</view>
								<view class="menu-item-btn">
									<cl-badge :hidden='false' is-dot type="primary" v-if="false">
										<view class="choice">
											选规格
										</view>
									</cl-badge>
									<cl-badge :hidden='false' :value='11' v-else>
										<view class="add-box">
											<view class="add">
												<cl-icon name="cl-icon-plus" :size="22"></cl-icon>
											</view>
										</view>
									</cl-badge>
								</view>
							</view>
						</view>
						<view class="fill-last" :style="{ height: fillHeight + 'px' }"></view>
					</scroll-view>
				</view>
			</view>
			<view class="bottom-enter">
				<view class="card">
					<image src="/static/images/pages/menu/card@2x.webp" mode=""></image>
				</view>
				<view class="money">
					共计:￥102.00
				</view>
				<view class="card-text">
					<view class="text">
						查看购物车
					</view>
				</view>
				<view class="xiadan">
					<view class="text">
						立即下单
					</view>
				</view>
			</view>
		</view>
	</cl-loading-mask>
</template>

<script>
import {mapState} from "vuex";
import restaurant from "../../store/restaurant";
import {getDishList} from "../../common/api";
	export default {
		name: "side-navigation",
		data() {
			return {
				scrollHeight: 400,
				scrollInto: "", //右侧导航滚动定位的id
				fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
				leftIndex: 0, //左侧的滚动条index
				scrollTopSize: 0, //滚动条距离顶部
				topArr: [], //每个栏目距离滚动盒子顶部的距离(减去了scrollTopSize)
				leftArray: [],
				rightArray: [],
				choiceVisible: false, //菜品规格弹框显示
				menuVisible: false, //购物车弹框
				firstLoading: false, //加载loading
			}
		},
		computed: {
      restaurant() {
        return restaurant
      },
			/* 计算左侧滚动位置定位 */
			leftIntoView() {
				return `left-${this.leftIndex > 3 ? this.leftIndex - 3 : 0}`;
			},
      ...mapState({
        restaurantInfo: state => state.restaurant.restaurantInfo,
        restaurantId: state => state.restaurant.restaurantId,
      }),
		},
		mounted() {
			/* 等待DOM挂载完成 */
			this.$nextTick(() => {
				/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
				setTimeout(() => {
					/* 等待滚动区域初始化完成 */
					this.initScrollView().then(() => {
						/* 获取列表数据，你的代码从此处开始 */
						// this.getListData();
            this.getMenuListData()
					});
				}, 500);
			});
		},
		methods: {
			/* 初始化滚动区域 */
			initScrollView() {
				return new Promise((resolve, reject) => {
					//uniapp获取dom节点信息的api
					let view = uni.createSelectorQuery().in(this).select('#scroll_box');
					view.boundingClientRect(res => {
						this.scrollTopSize = res.top;
						//左右的滚动区域与父元素相同
						this.scrollHeight = res.height;
						this.$nextTick(() => {
							resolve();
						});
					}).exec();
				});
			},
      // 请求访问数据
      async  getMenuListData(){
        const res = await getDishList(this.restaurantId)
        this.firstLoading = false
        this.leftArray = res.data.map(item => item.categoryName);
        this.rightArray = res.data.map(item => {
            return {
              title:item.categoryName,
              list:item.dishList
            }
        });
        console.log(this.leftArray);
        console.log(this.rightArray);
        // DOM 挂载后 再调用 getElementTop 获取高度的方法。
        this.$nextTick(() => {
          this.getElementTop();
        });
      },
			// 获取数据
			getListData() {
				new Promise((resolve, reject) => {
					// uni.showLoading();
					this.firstLoading = true
					setTimeout(() => {
						let [left, main] = [
							[],
							[]
						];
						for (let i = 0; i < 20; i++) {
							left.push(`${i + 1}类商品`);
							let list = [];
							let r = Math.floor(Math.random() * 10);
							r = r < 1 ? 3 : r;
							for (let j = 0; j < r; j++) {
								list.push(j);
							}
							main.push({
								title: `第${i + 1}类商品标题`,
								list
							});
						}
						// 将请求接口返回的数据传递给 Promise 对象的 then 函数。
						resolve({
							left,
							main
						});
					}, 200);
				}).then(res => {
					// uni.hideLoading();
					this.firstLoading = false
					this.leftArray = res.left;
					this.rightArray = res.main;
          console.log(this.leftArray)
          console.log(this.rightArray)
					// DOM 挂载后 再调用 getElementTop 获取高度的方法。
					this.$nextTick(() => {
						this.getElementTop();
					});
				});
			},
			// 获取元素顶部信息
			getElementTop() {
				new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().in(this).selectAll('.right-menu-items');
					view.boundingClientRect(data => {
						resolve(data);
					}).exec();
				}).then(res => {
					let topArr = res.map(item => {
						return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
					});
					//每个栏目的距离scroll顶部的距离
					this.topArr = topArr;
					/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
					let last = res[res.length - 1].height;
					if (last - 20 < this.scrollHeight) {
						this.fillHeight = this.scrollHeight - last + 20;
					}
				});
			},
			mainScroll(e) {
				let top = e.detail.scrollTop;
				let index = 0;
				/* 查找当前滚动距离 */
				for (let i = this.topArr.length - 1; i >= 0; i--) {
					/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
					if (top + 2 >= this.topArr[i]) {
						index = i;
						break;
					}
				}
				this.leftIndex = index < 0 ? 0 : index;
			},
			//切换类别,点击按钮
			onLeftIndexChange(index) {
				this.leftIndex = index
				this.scrollInto = `item-${index}`
			}
		},

	}
</script>

<style lang="scss" scoped>
	.menu {
		width: 100%;
		height: calc(100vh - 102rpx);

		.header-store-info {
			position: relative;
			width: 100%;
			height: 340rpx;
			background-color: $menu-hui;

			.header-store-image {
				position: absolute;
				width: 100%;
				height: 290rpx;
				top: 0;
				left: 0;
				z-index: 0;
				border-radius: 0 0 24rpx 24rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.header-store {
				position: absolute;
				left: 50%;
				bottom: 18rpx;
				transform: translateX(-50%);
				width: 700rpx;
				height: 250rpx;
				background-color: $white-notion;
				border-radius: 24rpx;
				overflow: hidden;
				box-shadow: 0px 0px 2rpx 0px $main-text;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items:  flex-start;
				span{
					padding-left: 40rpx;
				}
				.store {
					font-size: 28rpx;
					font-weight: 700;
				}

				.time {
					font-size: 24rpx;
					font-weight: 500;
					color: $list-content;
				}

				.tips {
					font-size: 24rpx;
					font-weight: 500;
					color: $list-content;
				}
				.discount{
					font-size: 24rpx;
					font-weight: 400;
				}
			}
		}

		.scroll-menu-list {
			width: 100%;
			height: calc(100% - 440rpx);
			display: flex;

			.left-type {
				position: relative;
				width: 140rpx;
				height: 100%;
				background-color: $menu-hui;
				// IE 10+
				-ms-overflow-style: none;

				//谷歌适用
				::-webkit-scrollbar {
					display: none;
				}

				// Firefox
				overflow: -moz-scrollbars-none;

				.left-type-scroll {
					position: relative;
					width: 100%;

					.left-menu-type-item {
						position: relative;
						width: 100%;
						height: 100rpx;
						background-color: $menu-hui;
						display: flex;
						justify-content: center;
						align-items: center;

						.badge {
							position: absolute;
							width: 140rpx;
							height: 100rpx;
							top: 0;
							left: 0;
							display: flex;
							align-items: center;

							.badge-box {
								width: 135rpx;
								height: 80rpx;
							}
						}

						span {
							color: $menu-hui-text;
							font-size: 26rpx;
							font-weight: 400;
						}


						&.select {
							background-color: $white-notion;

							span {
								color: $main-text;
								font-size: 26rpx;
								font-weight: 500;
							}
						}
					}
				}
			}

			.right-menu {
				width: calc(100% - 140rpx);
				height: 100%;
				background-color: $menu-hui;

				.right-menu-scroll {
					width: 100%;

					.right-menu-items {

						.menu-items-title {
							width: 100%;
							height: 80rpx;
							background-color: $white-notion;
							display: flex;
							align-items: center;
							justify-content: center;
							padding-top: 6rpx;

							span {
								width: calc(100% - 40rpx);
								font-size: 24rpx;
								font-weight: 500;
								color: $main-text;
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden; //溢出内容隐藏
								text-overflow: ellipsis; //文本溢出部分用省略号表示
								display: -webkit-box; //特别显示模式
								-webkit-line-clamp: 2; //行数
								line-clamp: 2;
								-webkit-box-orient: vertical; //盒子中内容竖直排列
							}
						}

						.menu-items-item {
							position: relative;
							width: 100%;
							height: 200rpx;
							background-color: #fff;
							display: grid;
							grid-template-columns: 240rpx auto 120rpx;

							&::after {
								position: absolute;
								bottom: 0;
								left: 0;
								content: "";
								display: block;
								width: 100%;
								height: 1px;
								background-color: $shadow-color;
								opacity: 0.5;
							}


							.menu-item-image {
								display: flex;
								align-items: center;
								justify-content: center;

								image {
									width: 200rpx;
									height: 140rpx;
									border-radius: 24rpx;
								}
							}

							.menu-item-content {
								display: flex;
								align-items: center;
								justify-content: flex-start;

								.item-content {
									height: 140rpx;
									display: flex;
									flex-direction: column;
									align-items: flex-start;
									justify-content: space-between;

									.title {
										width: 100%;
										white-space: nowrap;
										overflow: hidden;
										text-overflow: ellipsis;
										font-size: 30rpx;
										font-weight: 500;
										color: $main-text;
									}

									.content {
										width: 100%;
										font-size: 24rpx;
										font-weight: 400;
										color: $list-content;
										word-break: break-all;
										text-overflow: ellipsis;
										overflow: hidden;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										-webkit-line-clamp: 2;
										/* 这里是超出几行省略 */
									}

									.number {
										width: 100%;
										white-space: nowrap;
										overflow: hidden;
										text-overflow: ellipsis;
										// margin-left: 4rpx;
										font-size: 24rpx;
										font-weight: 500;
										color: $list-content;
									}
								}
							}

							.menu-item-btn {
								display: flex;
								align-items: flex-end;
								justify-content: center;
								padding-bottom: 28rpx;

								.choice {
									width: 100rpx;
									height: 44rpx;
									border-radius: 40rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									font-size: 24rpx;
									font-weight: 400;
									color: $white-notion;
									background-color: $main-color;
								}

								.add-box {
									width: 60rpx;
									height: 54rpx;
									display: flex;
									align-items: flex-end;
									justify-content: flex-start;

									.add {
										width: 44rpx;
										height: 44rpx;
										border-radius: 50%;
										display: flex;
										align-items: center;
										justify-content: center;
										background-color: $main-color;
										color: $white-notion;
									}
								}
							}
						}
					}

				}
			}

		}

		.bottom-enter {
			width: 100%;
			height: 100rpx;
			display: grid;
			grid-template-columns:120rpx auto 160rpx 160rpx 10rpx;
			.card{
				display: flex;
				align-items: center;
				justify-content: center;

				image{
					width: 76rpx;
					height: 76rpx;
				}
			}
			.money{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
			}
			.card-text,.xiadan{
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.card-text .text{
				background-color: $main-color;
			}
			.xiadan .text{
				background-color: $number-rich;
				font-weight: 700;
				font-size: 30rpx;
			}
			.text{
				width: 100%;
				height: 80%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 500;
				letter-spacing: 2rpx;
				color:$white-notion;
				margin-right: 1rpx;
			}
		}
	}
</style>
